import { NavLink, Route } from "react-router-dom";

import Home from "./views/Home";
import About from "./views/About";
import Contact from "./views/Contact";

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <ul>
        <li>
          {/* 
            当 url 的 pathname 为 /home/abcd
              1. exact false
                高亮
              
              2. exact true
                不高亮

          */}
          <NavLink to="/home" exact>
            go home
          </NavLink>
        </li>
      </ul>

      <hr />

      <ul>
        <li>
          <NavLink
            to={{
              pathname: "/home",
            }}
          >
            go home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about">go about</NavLink>
        </li>
        <li>
          <NavLink
            to={{
              pathname: "/contact/1",
              search: "?a=1&b=2",
              hash: "#page",
              state: {
                a: "1",
                b: "2",
                c: "3",
              },
            }}
          >
            go contact
          </NavLink>
        </li>
      </ul>

      <hr />

      {/* 
        /home           =>  Home
        /about          =>  About
        /contact/:id    =>  Contact
      */}
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact/:id" component={Contact} />
    </div>
  );
}
